<style type="text/css">
#events tr:hover
{
	background-color:#F7F7F7;
}
#events
{
	border-style:solid none solid none;
	border-color:#5872A7;
}
</style>
<script>
<!--
function detalles(i)
{
	var details;
	details = document.getElementById(i);

	if(details.getStyle('visibility') == 'hidden')
	{
		details.setStyle('visibility', 'visible');
	}
	else
	{
		details.setStyle('visibility', 'hidden');
	}
}
//-->
</script>

<?php
require_once 'common.php';

$eventos = $facebook->api_client->events_get($fb_user_id, null, time(), null);
//los prompt permissions solo aparecen si todavia no fueron granted
?>
<fb:prompt-permission perms="rsvp_event,create_event">
Grant permission to rsvp and create events
</fb:prompt-permission>

<table id="events" width="100%" rules="rows">
	<th></th>
	<th>Event</th>
	<th>RSVP</th>
	<th>Add to Calendar</th>
<?php
$i=0;
foreach($eventos as $evento)
{
	$fecha_inicio=date('Y-m-d', $evento['start_time']);
	$hora_inicio=date('H:i', $evento['start_time']);
	$fecha_fin=date('Y-m-d', $evento['end_time']);
	$hora_fin=date('H:i', $evento['end_time']);
	$picture = $evento['pic'];
	if($picture=="")
		$picture = 'http://static.ak.fbcdn.net/pics/s_default.jpg';
?>
	<tr>
		<td>
			<img src="<?php echo $picture; ?>">
		</td>
		<td>
			<p onclick="detalles(<?php echo($i); ?>);"><strong><?php echo $evento['name']; ?></strong></p>
			<div id="<?php echo($i); ?>" style="visibility:hidden">
				<?php
					echo "<strong>Starting Date: </strong>" . $fecha_inicio . "<br>";
					echo "<strong>Starting Time: </strong>" . $hora_inicio . "<br>";
					echo "<strong>Ending Date: </strong>" . $fecha_fin . "<br>";
					echo "<strong>Ending Time: </strong>" . $hora_fin . "<br>";
				?>
			</div>
		</td>
		<td>
			poner links a yes, no, maybe
		</td>
		<td>
			poner link para agregar al calendar (campos hidden)
		</td>
<?php
	$i = $i + 1;
}
?>